<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/wsDangan.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.css">

    <!-- 引入组件库 -->
    <script src="${request.contextPath}/statics/vue/vue.js"></script>
    <script src="${request.contextPath}/statics/vue/index.js"></script>
    <script src="${request.contextPath}/statics/vue/axios.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/vue/index.css">
    <script src="${request.contextPath}/statics/js/config.js"></script>
    <script src="${request.contextPath}/statics/js/bootstrap.js"></script>
    <script src="${request.contextPath}/statics/js/url-search-params.js"></script>

    <title>建设用地</title>
</head>
<body class="body">
<div id="app" class="container app" v-cloak style="width: 100%;height: 100%;padding: 0px;">
    <#include "danganHeader.html">
    <el-row class="search-container">
        <el-form ref="form" :inline="true"
                 label-position="left"
                 style="width:80%;"
                 size="small" :model="form" label-width="80px">
            <el-form-item label="用地单位" label-width="90px">
                <el-input v-model="form.landuser" clearable></el-input>
            </el-form-item>
            <el-form-item label="土地坐落">
                <el-input v-model="form.position" clearable></el-input>
            </el-form-item>
            <el-form-item label="批准文号">
                <el-input v-model="form.pzwh" clearable></el-input>
            </el-form-item>
            <el-form-item label="项目名称" label-width="50px;">
                <el-input v-model="form.bt" clearable></el-input>
            </el-form-item>
            <el-form-item label="案卷号" label-width="50px;">
                <el-input v-model="form.ajh" clearable></el-input>
            </el-form-item>
            <el-form-item label="所在地" label-width="60px;">
                <el-select v-model="form.szd" style="width: 100px;" placeholder="不限">
                    <el-option label="不限" value=""></el-option>
                    <el-option v-for="szd in options.szdOptions" :key="szd.location" :label="szd.location"
                               :value="szd.location"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" label-width="1px;">
                <el-select v-model="form.sFlh" style="width: 100px;" placeholder="不限">
                    <el-option label="默认全部" value="E"></el-option>
                    <el-option v-for="eFlh in options.eFlhOptions" :key="eFlh.flh" :label="eFlh.flh"
                               :value="eFlh.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-row>
                <el-col :span="12">
                    <el-pagination
                            style="margin-bottom: 10px;"
                            background
                            layout="prev, pager, next,total"
                            @current-change="danganPageChange"
                            @prev-click="danganPageChange"
                            @next-click="danganPageChange"
                            :current-page="page.currPage"
                            prev-text="上一页"
                            next-text="下一页"
                            :total="page.totalCount">
                    </el-pagination>
                </el-col>
                <el-col :span="12">
                    总共{{this.page.totalCount}}条 ｜ 共{{this.page.totalPage}}页/ 第{{this.page.currPage}}页
                </el-col>
            </el-row>

            <el-table
                    :data="tableData"

                    stripe
                    border
                    size="mini"
                    style="width: 100%;height: 640px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
            >

                <el-table-column
                        align="center"
                        header-align="center"
                        prop="xh"
                        label="序号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        prop="pzwh"
                        label="批准文号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        prop="landuser"
                        label="用地单位">
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        prop="position"
                        label="土地坐落">
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        prop="bt"
                        label="项目名称">
                </el-table-column>
                <el-table-column
                        align="center"
                        header-align="center"
                        prop="ajh"
                        label="案卷号">
                </el-table-column>
                <el-table-column
                        align="center"
                        header-align="center"
                        prop="nd"
                        label="年度">
                </el-table-column>
                <el-table-column
                        align="center"
                        header-align="center"
                        prop="szd"
                        label="所在地">
                </el-table-column>
                <el-table-column
                        align="center"
                        header-align="center"
                        prop="szd"
                        width="100"
                        label="地图">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.xmguid" @click="mapLocation(scope.row)" type="danger" size="small">
                            定位
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        align="left"
                        header-align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showPdf(scope.row)" type="primary" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-row>

    <el-dialog
            :visible.sync="pdfDialogVisible"
            fullscreen=true
            width="100%"
            height="100%"
            title="查看文档"
            center
    >
        <el-row style="height:100%;">
            <el-col :span="6" style="height: 100%;">
                <div class="pdf-menu-title"
                     style="line-height:1.7 ;height:5%;margin-left:0px;font-size:18px;font-weight: bold;text-indent: 20px;">
                    档案卷内目录
                </div>
                <div class="" style="height: 43%;width: 100%;overflow-y: scroll;">
                    <div class="row" style="min-height:100%;padding: 0px;margin: 0px;padding-top:10px;">

                        <div id="" v-for="jnml in daJnmlData"  @click="loadPdf(jnml.jnmlbh)"
                             class="pdf-menu  "  :class="{ 'active' : activeJnmlbh==jnml.jnmlbh }" style="padding-left: 50px;">
                           {{jnml.mlbh}}. {{jnml.mlmc}}
                        </div>
                    </div>
                </div>
                <div class="border" style="height: 2%;width: 100%"></div>
                <div class="row pdf-menu-title"
                     style="line-height:1.7 ;height:5%;margin-left:0px;font-size:18px;font-weight: bold;text-indent: 20px;">
                    档案基本信息
                </div>
                <div class="" style="height: 43%;width: 100% ;overflow-y: scroll;">
                    <div class="pdf-info"> 用地单位：{{dangan.landuser}}</div>
                    <div class="pdf-info">土地坐落： {{dangan.position}}</div>
                    <div class="pdf-info" style="width: 100%">
                        证 号：{{dangan.zh}}
                    </div>
                    <div class="pdf-info">批准文号： {{dangan.pzwh}}</div>
                    <div class="pdf-info"> 所在地： {{dangan.szd}}
                    </div>
                    <div class="pdf-info"> 图号： {{dangan.th}}
                    </div>
                    <div class="pdf-info"> 地号： {{dangan.dh}}
                    </div>
                    <div class="pdf-info"> 地类： {{dangan.dl}}
                    </div>
                    <div class="pdf-info"> 土地等级： {{dangan.tddj}}
                    </div>
                    <div class="pdf-info"> 权属性质： {{dangan.qsxz}}
                    </div>
                    <div class="pdf-info"> 发证日期： {{dangan.fzrq}}
                    </div>

                    <div class="pdf-info"> 件 &nbsp; &nbsp;&nbsp; &nbsp; 号： &nbsp;{{dangan.js}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 页&nbsp; &nbsp;&nbsp; &nbsp;数：{{dangan.ys}}
                    </div>
                    <div class="pdf-info"> 密&nbsp; &nbsp;&nbsp; &nbsp; 级： &nbsp;{{dangan.mj}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 保 管 期 限：{{dangan.bgqx}}
                    </div>
                    <div class="pdf-info"> 全&nbsp;宗 &nbsp; 号： &nbsp;{{dangan.qzh}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 目 &nbsp;录 &nbsp; 号：{{dangan.mlh}}
                    </div>
                    <div class="pdf-info"> 分&nbsp;类 &nbsp; 号： &nbsp;{{dangan.flh}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 案 &nbsp;卷 &nbsp; 号：{{dangan.ajh}}
                    </div>
                </div>
            </el-col>
            <el-col :span="18" style="height:100%">
                <div id="hideLeft" @click="hidePdfLeftInfo" class="hand" style="height: 100%;
                float: left;cursor: pointer;width: 2%;">
                    <div style="height: 48%;">
                        <span class="el-icon-arrow-left" style="top:48%;font-size:25px;
                        position: absolute;
                        padding-left: 3px;"></span>
                    </div>
                </div>
                <div style="height: 100%;width: 98%;float: left">
                    <iframe id="pdfIframe" contextmenu="return false;" scrolling="yes" style="width:100%;height:100%;"
                            :src="pdfUrl">
                    </iframe>
                </div>
            </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pdfDialogVisible = false">返回</el-button>
            <el-button type="danger" @click="printPdf">打印</el-button>

          </span>
    </el-dialog>
    <!--地图定位-->
    <el-dialog
            :visible.sync="mapLocationVisible"
            fullscreen=true
            width="100%"
            height="100%"
            center
    >
        <el-row style="height: 100%;">
            <div style="height: 100%;width: 25%;float:left;">
                <el-table
                        :data="tnzydkwktList"
                        @row-click="relocationMap"
                        style="width: 100%;height:100%;overflow: scroll">
                    <el-table-column
                            prop="dkMc"

                            highlight-current-row
                            label="地块名称">
                    </el-table-column>

                </el-table>
            </div>
            <div style="height: 100%;width: 75%;float:left">
                <iframe id="mapLocationIframe" contextmenu="return false;" scrolling="yes"
                        style="width:100%;height:100%;"
                        :src="mapLocationUrl">
                </iframe>
            </div>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="mapLocationVisible = false">返回</el-button>
            <el-button type="primary" @click="locationMap">定位</el-button>
          </span>
    </el-dialog>
</div>


</body>
<script type="text/javascript">
    'use strict';
    const http = axios.create({

        baseURL:getUrl(),
        timeout: 100000,
        withCredentials: false, // 是否允许带cookie这些
        // headers: {'Content-Type': 'application/json'}
    });
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                pzwh: "",//土地证号
                landuser: "",//土地使用者
                position: "",//土地坐落
                ajh: "",//案卷号
                szd: "",//所在地
                bt: "",//标题项目名称
                flh: "E",//分类号
                sFlh: "E",//自分类号
            },
            years: [],
            szd: [],//所在地
            tableData: [],
            page: {
                totalCount: 0,
                pageSize: 10,
                totalPage: 1,
                currPage: 1,
            },
            pdfDialogVisible: false,//查看pdf的dialog是否显示
            daJnmlData: [],//档案卷内目录数据,
            showPdfNbxh: '',
            dangan: {},//显示pdf对应的文书档案的详细属性
            bgqxOptions: [],//保管期限选择项


            loginForm:{
                loginVisible:false,//登录窗口显示
                username:"",
                password:"",
                dialog:false,
                rules:{
                    username:[{required: true,message:'请输入登录名', trigger: 'blur'}],
                    password: [{required: true,message:'请输入密码', trigger: 'blur'}]
                }
            },
            pwdForm:{
                resetPasswordVisible:false,
                oldPassword:'',
                newPassword:'',
                rules:{
                    oldPassword:[{required: true,message:'请输入原密码，初始密码123456', trigger: 'blur'}],
                    newPassword: [{required: true,message:'请输入新密码', trigger: 'blur'}]
                },
                showCancel:true,
            },
            options: {
                flhOptions: [],
                szdOptions: [],
                eFlhOptions:[{flh:"E2:国家建设分批次用地审批材料 ",value:"E2"},
                    {flh:"E3:国家建设用地具体项目用地审批材料 ",value:"E3"},{flh:"E4:个人建房用地审批材料 ",value:"E4"},{flh:"E5:土地租凭、抵押、转让审批材料 ",
                        value:"E5"},{flh:"E6:土地使用权出让审批材料 ",
                        value:"E6"},{flh:"E7:土地储备",
                        value:"E7"},{flh:"E8:征地拆迁 ",
                        value:"E8"}]
            },
            pdfUrl:'',
            activeJnmlbh: 0,
            username:'',
            mapLocationVisible: false,//一张图定位的dialog显示
            mapLocationUrl: getUrl() + "/map.html?appKey=31d217edf05b40f2a2dfbb8e37cdc114",
            mapId: 0,
            tnzydkwktList:[],
        },
        mounted() {

            this.username=window.localStorage.getItem("username")
            this.form.flh=window.sessionStorage.getItem("flh")
            this.form.sFlh=window.sessionStorage.getItem("flh")
            this.loadDangan(1);
            this.loadBgqx();
            this.initYear();
            // this.isLogin()
            this.loadSzd()
            this.loadFlh()
        },
        methods: {
            loadHtml(url, flh) {
                window.sessionStorage.setItem("flh",flh)
                parent.location.href = url
            },
            search() {
                this.page.page = 1
                this.loadDangan()
            },
            loadDangan() {
                let params = new URLSearchParams();

                params.append("pzwh", this.form.pzwh)
                params.append("szd", this.form.szd)
                params.append("bt", this.form.bt)
                params.append("landuser", this.form.landuser)
                params.append("position", this.form.position)
                params.append("flh", this.form.flh)
                params.append("sFlh", this.form.sFlh)
                params.append("ajh", this.form.ajh)
                params.append("page", this.page.currPage)
                http.post('/dadjgll/list', params).then(function (resp) {
                    this.tableData = resp.data.page.list

                    this.page.totalCount = resp.data.page.totalCount
                    this.page.pageSize = resp.data.page.pageSize
                    this.page.totalPage = resp.data.page.totalPage
                    this.page.currPage = resp.data.page.currPage
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].xh = this.page.pageSize * (this.page.currPage - 1) + i + 1;
                    }
                }.bind(this)).catch(function (err) {
                    console.error(err)
                });
            },
            showPdf(row) {
                console.log(row)
                this.showPdfNbxh = row.nbxh
                this.dangan = row
                this.loadJnml(row.nbxh)
                this.pdfDialogVisible = true
            },
            mapLocation(row) {
                this.mapLocationVisible = true
                this.mapId = row.xmguid
                let params = new URLSearchParams()
                params.append("xmGuid", row.xmguid)
                // document.getElementById('mapLocationIframe').contentWindow.location.reload(true);
                http.post('/tnzydkwkt/getByXmGuid', params).then(function (resp) {
                    let tnzydkwktList = resp.data.tnzydkwktList
                    this.tnzydkwktList= tnzydkwktList
                    console.log(tnzydkwktList)
                    var tnzydkwkt;
                    if(tnzydkwktList.length>0){
                        tnzydkwkt=tnzydkwktList[0]
                    }
                    var ifrWin = document.getElementById("mapLocationIframe").contentWindow;
                    var sms = {color: [255, 0, 0, 0.2],outline: {  // autocasts as new SimpleLineSymbol()
                            color: [255, 0, 0, 1],
                            width: "2px"
                        }};
                    var pjsonArray = JSON.parse(tnzydkwkt.pjson)
                    var rings = new Array(pjsonArray)
                    var locationed=false
                    for (var i = 1; i <= 20; i++) {
                        setTimeout(function () {
                            if (ifrWin.getMainViewer() != undefined) {
                                if(!locationed){
                                    var id = ifrWin.getMainViewer().locateByGeometry({'rings': rings}, null, sms)
                                    locationed=true
                                }
                            }
                        }, i*500)
                    }
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            relocationMap(row){
                var pjsonArray = JSON.parse(row.pjson)
                var ifrWin = document.getElementById("mapLocationIframe").contentWindow;
                var rings = new Array(pjsonArray)
                var sms = {color: [255, 0, 0, 0.2],outline: {  // autocasts as new SimpleLineSymbol()
                        color: [255, 0, 0, 1],
                        width: "2px"
                    }};
                var id = ifrWin.getMainViewer().locateByGeometry({'rings': rings}, null, sms)
            },
            locationMap() {
                http.get('/tcqzswkt/info/' + this.mapId).then(function (resp) {
                    let tCqzswkt = resp.data.tCqzswkt
                    var ifrWin = document.getElementById("mapLocationIframe").contentWindow;
                    /*  var point = new Point(121.106994,29.899625, new SpatialReference(4326));
                      var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255,0,0,0.5]));*/

                    var sms = {color: [255, 0, 0, 0.2],outline: {  // autocasts as new SimpleLineSymbol()
                            color: [255, 0, 0, 1],
                            width: "2px"
                        }};
                    var pjsonArray = JSON.parse(tCqzswkt.pjson)
                    var rings = new Array(pjsonArray)
                    var id = ifrWin.getMainViewer().locateByGeometry({'rings': rings}, null, sms)
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            hidePdfLeftInfo() {
                //todo 隐藏pdf左侧详细内容
            },
            loadJnml(nbxh) {
                let params = new URLSearchParams;
                params.append("nbxh", nbxh)
                console.info('加载卷内目录', nbxh)
                http.post('/dajnmlb/list', params).then(function (resp) {
                    this.daJnmlData = resp.data.page.list
                    if(this.daJnmlData.length>0){
                        // this.pdfUrl="/dangan/statics/pdf/web/viewer.html?file=/dangan/file/download/"+this.daJnmlData[0].jnmlbh
                        this.loadPdf(this.daJnmlData[0].jnmlbh)
                    }
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            loadPdf(jnmlbh){
                this.pdfUrl="/danganSys/statics/pdf/web/viewer1.html?file=/danganSys/file/download/"+jnmlbh;
                document.getElementById('pdfIframe').contentWindow.location.reload(true);
                this.activeJnmlbh = jnmlbh
            },
            printPdf(){
                window.open(getUrl()+"/file/download/"+this.activeJnmlbh)
            },
            danganPageChange(page) {//翻页
                this.page.currPage = page
                this.loadDangan(page)
            },
            /**
             * 加载分类号
             */
            loadFlh() {
                let params = new URLSearchParams;
                let user = JSON.parse(window.localStorage.getItem("user"))
                params.append("userId", user.userId)
                http.post('/danganSys/dauserflh/list', params).then(function (resp) {
                    this.options.flhOptions = resp.data.page.list
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            loadSzd() {
                let params = new URLSearchParams;
                let user = JSON.parse(window.localStorage.getItem("user"))
                params.append("userId", user.userId)
                http.post('/danganSys/dauserlocation/list', params).then(function (resp) {
                    this.options.szdOptions = resp.data.page.list
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            loadBgqx() {
                let params = new URLSearchParams;
                // params.append("name","保管期限")
                http.post('/sys/dict/list?type=' + "保管期限").then(function (resp) {
                    // this.bgqxOptions=resp.data.page.list
                    this.bgqxOptions = resp.data.page.list
                }.bind(this)).catch(function (err) {
                    console.error(err)
                })
            },
            initYear() {
                var year = new Date().getFullYear();
                this.years[0] = year
                for (var i = 1; i < 30; i++) {
                    this.years[i] = year - i;
                }
            },
            logout(){
                window.localStorage.clear()
                location.href="/danganSys/logout"
            },
            isLogin(){
                window.localStorage
                var login= window.localStorage.getItem("login")
                console.log("登录状态："+login)
                if(login&&login=="true"){
                    console.log("已登录")
                    this.loginForm.loginVisible=false
                }else{
                    this.$message.error("还未登录")
                    this.loginForm.loginVisible=true
                    console.log("还未登录")
                }
            },
            login(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("登录表单验证通过")
                        var data = "?username="+this.loginForm.username+"&password="+this.loginForm.password+"&captcha="+this.loginForm.password
                        http({ method: 'post',
                            url: 'sys/login'+data,
                            headers: {'Content-Type': 'application/json'}
                        }).then(function (result) {
                            if(result.data.code == 0){//登录成功
                                window.localStorage.setItem("login","true")
                                this.loginForm.loginVisible=false
                            }else{
                                window.localStorage.setItem("login","false")
                                this.$message.error(result.data.msg)
                            }
                        }.bind(this)).catch(function (err) {
                            console.error(err)
                        })
                        // http.post('sys/login',params, {
                        //     headers: {'Content-Type': 'application/json'}
                        // })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            resetPassword(){
                this.$refs['pwdForm'].validate((valid) => {
                    if (valid) {
                        console.log("密码修改表单验证通过")
                        var data = "?password="+this.pwdForm.oldPassword+"&newPassword="+this.pwdForm.newPassword
                        http({ method: 'post',
                            url: 'sys/user/password'+data,
                            headers: {'Content-Type': 'application/json'}
                        }).then(function (result) {
                            if(result.data.code == 0){//修改密码成功
                                this.$message.success("密码修改成功")
                                this.pwdForm.resetPasswordVisible=false
                                this.pwdForm.oldPassword=''
                                this.pwdForm.newPassword=''
                            }else{
                                this.$message.error(result.data.msg)
                            }
                        }.bind(this)).catch(function (err) {
                            console.error(err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
<style lang="scss" scoped>
    .el-dialog__header{
        padding: 15px;
        height:5%;
    }
    .el-dialog__body{
        height:88%;
        padding: 5px 15px 10px !important;;
    }
    .el-dialog__footer{
        height:7%;
    }
    table{
        font-size: 15px;
    }
</style>
</html>



